<template>
    <div class="memorandum-data clear">
        <div class="schedule-calendar fl">
            <header-bar :year="year"
                        :month="month"
                        @updateValue="updateView"></header-bar>
            <div class="schedule-calendar-body">
                <week :startWeek="startWeek"></week>
                <month :year="year"
                       :month="month"
                       :startWeek="startWeek"
                       :data="events"
                       :itemRender="dateItemRender"></month>
            </div>
        </div>
        <!--  -->
        <div class="memorandum-msg fr">
            <router-link class="memorandum-path" :to="{path: '/memorandum/add',query: {data: (new Date(myTime)).getTime()}}">
                <i></i>
            </router-link>
            <h3>{{myTime}}</h3>
            <div class="memorandum-pl" v-if="placeholder">
                <p>该天还没有备忘事件~</p>
                <img src="../../../../../public/images/Group-10.png" >
                <!-- <i></i> -->
            </div>
            <div class="memorandum-schedule" v-if="mySchedule.length !== 0">
                <el-scrollbar >
                    <ul>
                        <li class="memorandum-list" v-for="(item, index) of mySchedule" :key="index">
                            <div class="clear">
                                <span>{{item.time}}</span>
                                <i class="el-icon-star-on" v-if="item.is_sign"></i>
                                <div class="memorandum-op fr">
                                    <el-tooltip content="编辑" placement="top" effect="light">
                                      <i class="el-icon-edit" @click="editMemorandum(item.id)"></i>
                                    </el-tooltip>
                                    <el-tooltip content="删除" placement="top" effect="light">
                                      <i class="el-icon-close"  @click="removeDate(item.id)"></i>
                                    </el-tooltip>
                                </div>
                            </div>
                            <div class="memorandum-lis-txt" v-html="item.text" @click.prevent ="pathSee(item.id)"></div>
                        </li>
                    </ul>   
                </el-scrollbar>
            </div>
          
        </div>
    </div>

</template>

<script>
    import { EventBus } from './utils'
    import headerBar from './header'
    import week from './week'
    import month from './month'

    export default {
        name: 'schedule-calendar',
        components: {
            headerBar,
            week,
            month,
        },
        props: {
            startMonth: String,
            startWeek: {
                type: Number,
                default: 1
            },
            // events: {
            //     type: Array,
            //     default: []
            // },
            dateItemRender: Function
        },
        data() {
            return {
                year: new Date().getFullYear(),
                month: new Date().getMonth(),
                dragItem: null,
                myTime: '',
                mySchedule: [],
                placeholder: false,
                events: []
            }
        },
        watch: {

        },
        created() {
           
            this.scheduleList()
        },
        mounted() {
            this.$nextTick(function () {
                 EventBus.$on('cell-dragenter', this.cellDragenter)
                 EventBus.$on('item-dragstart', this.itemDragstart)
                 EventBus.$on('item-drop', this.itemDrop)
                 EventBus.$on('item-click', this.itemClick)
                 EventBus.$on('date-click', this.dateClick)
             })
        },
        methods: {
            scheduleList(){
                this.mySchedule = []
                this.events = []
                const now = new Date()
                let year = this.year
                let month = this.month + 1;
                let date =  now.getDate()
                const fillZero = value => (value < 10 ? `0${value}` : value)
                month = fillZero(month)
                date = fillZero(date)
                this.myTime = `${year}-${month}-${date}` 
                
                let success = (res =>{
                    let data = res.data;

                    for (let i = 0; i < data.length; i++) {
                        
                        this.events.push({
                            id: data[i].id,
                            date: data[i].memo_time.substring(0,10),
                            time: data[i].memo_time.substring(11,16),
                            text: data[i].content,
                            create_id: data[i].create_id,
                            is_sign: data[i].is_sign,
                            user_name: data[i].user_name,
                            create_time: data[i].create_time,
                            memo_time: data[i].memo_time
                        })
                  

                        // const d = this.events[i].date.split('-')[2];
                        // this.events[i].date = `${now.getFullYear()}-${now.getMonth() + 1}-${d}`
// console.log(this.myTime, this.events[i].date);
                        if (this.myTime == this.events[i].date) {
                            this.mySchedule.push(this.events[i])
                        }
                    }
                    this.mySchedule.sort((a, b)=>{  
                        return Date.parse(a.memo_time) - Date.parse(b.memo_time) 
                    })
                    this.mySchedule.length === 0 ? this.placeholder = true : this.placeholder = false

                });
                this.$ajax({
                    url: 'api/memo/memo_list',
                    method: 'get',
                    params: {
                        create_id: this.$g.user_id,
                        // select_time: this.dateTime,
                    },
                    func: {success: success}
                })
            },
            pathSee(id){
                this.$router.push({path: '/memorandum/see', query: {id, id}})
            },
            editMemorandum(id){
                this.$router.push({path: '/memorandum/edit',query: {id: id}})
            },
            removeDate(id){
                this.$confirm('是否删除该记录?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    
                    let success = (res=>{
                        this.$message.success(res.msg)
                        this.scheduleList()
                    })
                    this.$ajax({
                        url: 'api/memo/memo',
                        method: 'delete',
                        params: { id: id},
                        func: {success:success}
                    })
                }).catch(() => {});
            },
            updateView(year, month) {
                this.year = year
                this.month = month
            },
            cellDragenter(e, date, type, index) {
                this.$emit('event-dragenter', e, this.dragItem, date)
            },
            itemDragstart(e, item, date, type) {
                this.dragItem = item
                this.$emit('event-dragstart', e, item, date)
            },
            itemDrop(e, date, type, index) {
                if (!this.dragItem) return
                // console.log('[event-dragend]:', this.dragItem, date)
                this.$emit('event-dragend', e, this.dragItem, date)
            },
            itemClick(e, item) {
                // console.log('[event-click]:', item)
                this.$emit('event-click', e, item)
            },
            dateClick(e, date, details) {
                // console.log('[date-click]:', date, details)
                // console.info(details.length)
                this.$emit('date-click', e, date)
                this.myTime = date
                this.mySchedule = details
                this.mySchedule.sort((a, b)=>{  
                    return Date.parse(a.memo_time) - Date.parse(b.memo_time) 
                })
                this.mySchedule.length === 0 ? this.placeholder = true : this.placeholder = false
            }
        },
        destoryed() {
            EventBus.$off()
        }
    }
</script>


<style lang="scss">
    .memorandum-data{
        height: 100%;
    }
    .schedule-calendar {
        position: relative;
        color: #444;
        font-size: 14px;
        width: 500px;
        margin: 95/1200*100% 0 0 110/1200*100%;
    }
    .schedule-calendar *,
    .schedule-calendar *::before,
    .schedule-calendar *::after {
        box-sizing: border-box;
    }
    .schedule-calendar button {
        border: 0;
        outline: none;
        cursor: pointer;
        background: transparent;
    }
    .schedule-calendar-body {
        position: relative;
        -ms-flex: 1;
        flex: 1;
        width: 100%;
        overflow: hidden;
        background: #fff;
    }

    .memorandum-pl{
        background: #00aeee;
        height: calc(100% - 300px);
        margin-left: 60px;
        border-radius: 5px 0 0 5px;
        text-align: center;
        >p{
            padding: 60px 0 60px 60px;
            font-size: 14px;
            color: #fff;
            text-align: left;
        }
    }

    .memorandum-lis-txt{
        cursor: pointer;
        height: 19px;
        overflow: hidden;
        cursor: pointer;
        
        div,p,span,h1,h2,h3,h4,h5,h6,ul,li{
            font-size: 14px !important;
        }
        &:hover{
            color: #caedff;
        }
    }

    .memorandum-list{

    }
</style>